<template>
    <div>
        <Button type="primary" @click="changenum($event)">切换</Button>
        <Button type="primary" @click="add">添加</Button>
        <Button type="primary" @click="remove">删除</Button>
        <Tree :data="data" @on-select-change='changeTree($event)'></Tree>
        <Modal v-model="modalAddUser" title="添加">
            <Form ref="formValidate" :model="formValidate"  :label-width="80">
                <FormItem label="Name" prop="name">
                    <Input v-model="catetitle" placeholder="请输入类名"></Input>
                </FormItem> 
            </Form>
             <div slot="footer">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')">重置</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
       //import {dataMixins}  from '../common/dataMixins';
      export default {
          //mixins: [dataMixins],
        data () {
            return {
                modalAddUser:false,
                modules:'cate',
                modelAdd:false,
                modalremove:false,
                data: [],
                num:1,
                cateId:'',
                type:'',
                catetitle:'',
                formValidate:{
                    parentId:'',
                    catetype:'',
                    expand:'',
                    type:''
                },
            }
        },
        methods:{
            changenum(event){
                this.num++;
                if(this.num>3){
                    this.num=1;
                }
                this.getData();
            },
            changeTree(event){
                this.cateId=event[0]._id;
                this.type=event[0].type;
                
            },
            add(){
                if(this.cateId==''){
                    this.$Message.info('请选择分类');
                }else{
                    this.modalAddUser=true;
                }
            },
            remove(){
                    if(this.cateId==''){
                    this.$Message.info('请选择分类');
                }else{
                    this.$Modal.confirm({
                    title: '确认删除对话框',
                    content: '<p>是否删除数据</p>',
                    onOk: () => {
                        fetch(`http://localhost:3000/cate/data/${this.cateId}`,{
                            method:'delete',
                            headers:{
                                'Content-Type':'application/json'
                                },
                            })
                            .then(res=>{
                                return res.json()
                            })
                            .then(data=>{
                                this.$Message.info('删除成功');
                                this.getData();
                            })
                        }
                    });
                }
            }, 
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.formValidate.parentId = this.cateId;
                        this.formValidate.title = this.catetitle;
                        this.formValidate.expand = true;
                        this.formValidate.type=this.type;
                        this.$Message.success('Success!');
                        fetch(`http://localhost:3000/cate/data`,{
                            method:'post',
                            headers:{
                                'Content-Type':"application/json"
                            },
                            body:JSON.stringify(this.formValidate)
                        }).then(res=>{
                            return res.json();
                        }).then(data=>{
                            this.modalAddUser = false;
                            this.modelAdd=false;
                            this.formValidate = {
                                title: '',
                                parentId:''
                            };
                             this.getData();
                        })
                        
                    }else {
                        this.$Message.error('Fail!');
                    }
                })
               
            },
            handleReset(title){
                this.$refs[title].resetFields();
                this.modalAddUser = true;
            },
            getData(){
                //console.log(bodyString)
                fetch(`http://localhost:3000/cate/list/${this.num}`,{
                method:'get',
                headers:{
                'Content-Type':"application/json"
                },
                //body:bodyString
                }).then(res=>{
                    return res.json();
                }).then(data=>{
                    this.data=data;
                })
            }
        },
        created(){
                this.getData();
        }
    }
</script>
